<template>
	<view class="bar-gradient" :style="barGradientBg">
		<!-- 状态栏 -->
		<view :style="statusBarHeight"></view>
		<!-- 图标和类容 -->
		<view class="content">
			<view class="left item" @tap="back">
				<text class="iconfont icon">&#xe660;</text>
			</view>
			<view class="right item" @tap="more">
				<text class="iconfont icon">&#xe65a;</text>
			</view>
		</view>
		
	</view>
	
</template>
 
<script setup>
import { computed, ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'

const emit = defineEmits(['release'])

const pageScrollHeight = ref('') // 页面滚动的高度
const statusBarHeight = computed(() => { // 获得状态栏的高度
	let h =uni.getSystemInfoSync().statusBarHeight
	return `height:${h}px;`
})

onPageScroll((e) => { // 获得页面的滚动高度
	pageScrollHeight.value = e.detail.scrollTop
	// console.log(pageScrollHeight.value);
})

const barGradientBg = computed(() => { // 导航栏的背景
	let start = uni.upx2px(500)
	let end = uni.upx2px(620)
	let H = end - start
	let num = 0
	if(pageScrollHeight.value > start){
		num = (pageScrollHeight.value - start) / H
	}
	num = num > 1 ? 1 : num
	return `background-color: rgba(255,255,255, ${num});`
})

const back = () => { // 点击返回
	uni.navigateBack({
		delta:1
	})
}

const more = () => { // 点击发布
	emit('release')
}

</script>

<style lang="less" scoped>
.bar-gradient{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	.content{
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0 50rpx 20rpx 50rpx;
		.item{
			width: 50rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.icon{
		font-size: 40rpx;
	}
}
</style>